<template>
	<div  class="ui secondary  menu" style="background-color: white;width:100%;height: 100%;margin: 0;border: 0px;">
			
			<el-drawer
			  title="提示:本站建议使用PC端访问"
			  :visible.sync="drawer"
			  :direction="direction"
			  :before-close="handleClose"
			  size ="70%">
			  <!-- 使用指南位置 后期存放数据库 通过后台添加/修改 -->
			  <div class="explain">
			  	<div class="typo m-padded-tb-small line-numbers match-braces rainbow-braces"  :class="{'m-big-fontsize':bigFontSize}">
					<h3>1、文章列表</h3>
					<p>从上到下依次为文章标题、发表时间、浏览量、文章所属分类、描述、标签</p>
					<p><img src="https://cdn.jsdelivr.net/gh/lpl-code-github/blog_img/img/image-20210831023019742.png" alt="image-20210831023019742"  /></p>
					<h3>2、文章详情页</h3>
					<p>通过顶部工具栏的按钮可改变字体大小、切换护眼模式</p>
					<p>&nbsp;</p>
					<p><img src="https://cdn.jsdelivr.net/gh/lpl-code-github/blog_img/img/image-20210901015235139.png" referrerpolicy="no-referrer" alt="image-20210901015235139"></p>
					<p>&nbsp;</p>
					<h3>3、搜索文章</h3>
					<p>顶部搜索框输入关键词搜索</p>
					<p><img src="https://cdn.jsdelivr.net/gh/lpl-code-github/blog_img/img/image-20210831021028552.png" referrerpolicy="no-referrer" alt="image-20210831021028552"></p>
					<h3>4、评论</h3>
					<p>留言时需要输入QQ号，自动获取昵称和头像，且30秒只能发表一次留言</p>
					<p><img src="https://cdn.jsdelivr.net/gh/lpl-code-github/blog_img/img/image-20210831021727193.png" alt="image-20210831021727193"  /></p>
					<p>&nbsp;</p>
					<h3 >5、有一个bug和一个待优化（不改了）</h3>
					<ul>
					<li>处在文章分类页的时候，去跳转别的分类页，页面会正确指向第一页，但分页按钮未指向第一页而是上一个分类页的页数</li>
					<li>首页做了缓存，所以从首页进入的文章点击文章顶部的返回按钮就回到上次浏览的位置，但分类页和标签页没做缓存</li>
					</ul>

				</div>
			  </div>
			</el-drawer>

			<el-button @click="drawershow" type="text" class="m-mobile-hide" style="margin-left: 20px;margin-right: 20px;">
			  <i class="question circle outline icon"></i>使用帮助
			</el-button>
			
			<el-button @click="drawershow" type="text" class="m-mobile-show" style="margin-right: 20px;">
			  <i class="question circle outline icon"></i>使用帮助
			</el-button>
			
			<div class="right menu">
				<el-autocomplete  v-model="queryString" :fetch-suggestions="debounceQuery" placeholder="请输入关键词" class="right  item m-search"
				 :class="{'m-mobile-hide': mobileHide}" popper-class="m-search-item" @select="handleSelect">
					<i class="search icon el-input__icon" slot="suffix"></i>
					<template slot-scope="{ item }">
						<div class="title">{{ item.title }}</div>
						<span class="content">{{ item.content }}</span>
					</template>
				</el-autocomplete>
			</div>
			
			
		
	</div>
</template>

<script>
	import {
		getSearchBlogList
	} from "@/api/blog";
	import {
		mapState
	} from 'vuex'

	export default {
		name: "Search",
		props: {
			blogName: {
				type: String,
				required: true
			},
			categoryList: {
				type: Array,
				required: true
			},
		},
		data() {
			return {
				drawer: false,
				show:true,
				explain:'',
				queryString: '',
				queryResult: [],
				timer: null
			}
		},

		methods: {
			drawershow(){
				this.drawer = !this.drawer;
			},
			toggle() {
				this.show=!show;
			},

			debounceQuery(queryString, callback) {
				this.timer && clearTimeout(this.timer)
				this.timer = setTimeout(() => this.querySearchAsync(queryString, callback), 1000)
			},
			querySearchAsync(queryString, callback) {
				if (queryString == null ||
					queryString.trim() === '' ||
					queryString.indexOf('%') !== -1 ||
					queryString.indexOf('_') !== -1 ||
					queryString.indexOf('[') !== -1 ||
					queryString.indexOf('#') !== -1 ||
					queryString.indexOf('*') !== -1 ||
					queryString.trim().length > 20) {
					return
				}
				getSearchBlogList(queryString).then(res => {
					if (res.code === 200) {
						this.queryResult = res.data
						if (this.queryResult.length === 0) {
							this.queryResult.push({
								title: '无相关搜索结果'
							})
						}
						callback(this.queryResult)
					}
				}).catch(() => {
					this.msgError("请求失败")
				})
			},
			handleSelect(item) {
				if (item.id) {
					this.$router.push(`/blog/${item.id}`)
				}
			}
		}
	}
</script>

<style>
	.el-button--text {
	    color: #909399 !important; 
	    background: 0 0;
	    padding-left: 0;
	    padding-right: 0;
		font-size: 1.15rem;
	}
	.el-button--text :hover{
	    color: #606266 !important; 
	    background: 0 0;
	    padding-left: 0;
	    padding-right: 0;
	}
	
	.ui.secondary.menu .container{
		display: flex;
		justify-content: space-around;
	}
	
	.el-dropdown-link {
		outline-style: none !important;
		outline-color: unset !important;
		height: 100%;
		cursor: pointer;
	}

	.el-dropdown-menu {
		margin: 7px 0 0 0 !important;
		padding: 0 !important;
		border: 0 !important;
		background: #1b1c1d !important;
	}

	.el-dropdown-menu__item {
		padding: 0 15px !important;
		color: rgba(255, 255, 255, .9) !important;
	}

	.el-dropdown-menu__item:hover {
		background: rgba(255, 255, 255, .08) !important;
	}

	.el-popper .popper__arrow::after {
		content: none !important;
	}

	.popper__arrow {
		display: none !important;
	}

	.m-search {
		min-width: 120px !important;
		padding: 0 !important;
		border: #d0d0d0 1px solid !important;
	}

	.m-search input {
		color: black !important;;
		border: 1px !important;
		background-color: inherit;
		padding: .67857143em 2.1em .67857143em 1em;
	}
	.el-input__inner {
		border: 0px !important;
	}
	.m-search i {
		color: black !important;
	}

	.m-search-item {
		min-width: 350px !important;
		padding-left: 1.25rem;
		padding-right: 1.25rem;
	}

	.m-search-item li {
		line-height: normal !important;
		padding: 8px 10px !important;
	}

	.m-search-item li .title {
		text-overflow: ellipsis;
		overflow: hidden;
		font-size: 1.1625rem;
		color: #606266;
	}

	.m-search-item li .content {
		text-overflow: ellipsis;
		font-size: 1.1375rem;
		color: #606266;
	}
	.explain {
		padding: 1.875rem;
	}
	
	/deep/ :focus {
	    outline: 0;
	}

	/deep/ .el-drawer__body {
	      overflow: auto;
	}
	/deep/ .el-drawer__container ::-webkit-scrollbar{
	      display: none;
	}
</style>
